<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 网站标题和描述 SEO优化相关 -->
    <title>快吃网 将最好的餐厅带到你家</title>
    <meta name="description" content="最好的外卖网站" />
    <!-- 网站的偏爱图标 -->
    <link rel="shortcut icon" href="./favicon.svg" type="image/svg+xml" />
    <!-- css链接 -->
    <link rel="stylesheet" href="./css/index.css" />
    <!-- 字体图标外链 采用font-awesome cdn方案 -->
    <link
      href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.2.0/css/all.min.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <!-- header -->
    <header class="header">
      <div class="container w">
        <a href="#" class="logo">
          <img src="./images/logo.svg" alt="快吃网" width="138" height="38" />
        </a>
        <ul class="nav-bar">
          <li class="nav-bar-item">
            <a href="#" class="navbar-link">首页</a>
          </li>
          <li class="nav-bar-item">
            <a href="#" class="navbar-link">关于我们</a>
          </li>
          <li class="nav-bar-item">
            <a href="#" class="navbar-link">合作餐厅</a>
          </li>
          <li class="nav-bar-item">
            <a href="#" class="navbar-link">联系方式</a>
          </li>
        </ul>
        <div class="header-btn">
          <button class="cart-btn">
            <i class="fa fa-cart-plus" aria-hidden="true"></i>
          </button>
          <a href="#" class="btn btn-primary has-after">现在订购</a>
        </div>
      </div>
    </header>
    <!-- main -->
    <main>
      <article>
        <!-- section1 -->
        <section class="section1">
          <div class="content w" data-reveal='left'>
            <div class="container">
              <h1>最好的餐厅<br />带到你家</h1>
              <p>
                我们将和最好的餐厅紧密合作，将美妙的食物快速送到你的房间里。
              </p>
              <button class="btn">现在订购</button>
            </div>
            <div class="section1-banner relative" data-reveal>
              <img src="./images/hero-banner.png" alt="" class="w-100" />
              <img
                src="./images/hero-shape-1.svg"
                alt=""
                class="pos-1 absolute"
              />
              <img
                src="./images/hero-shape-2.svg"
                alt=""
                class="pos-2 absolute"
              />
            </div>
          </div>
        </section>
        <!-- section2  -->
        <section class="section2">
          <div class="content w">
            <h1 data-reveal>如何使用我们的服务？</h1>
            <p data-reveal>拿起手机打开APP，只需三步美食即刻而来！</p>
            <ul class="container">
              <li data-reveal='left'>
                <img src="./images/instructuion-1.png" alt=""  class="w-100"/>
                <br />
                <h2>第一步 选择餐厅</h2>
                <br />
                <p>这里的餐厅可以满足大家各种口味需求！</p>
              </li>
              <li data-reveal='top'>
                <img src="./images/instructuion-2.png" alt=""  class="w-100"/>
                <br />
                <h2>第二步 选择餐品</h2>
                <br />
                <p>找到你最想要的美食，然后下单！</p>
              </li>
              <li data-reveal='right'>
                <img src="./images/instructuion-3.png" alt="" class="w-100" />
                <br />
                <h2>第三步 等待送达</h2>
                <br />
                <p>飞速前往你的住址，稍等一下马上就来！</p>
              </li>
            </ul>
          </div>
        </section>
        <!-- section3 -->
        <section class="section3">
          <div class="content w">
            <div class="text-area" data-reveal='left'>
              <h1>所在城市的最好餐厅</h1>
              <p>这里展示了各种风格的餐厅，查看它们的评分来确认你的选择。</p>
            </div>
            <div class="rest rest-1" data-reveal='top'>
              <img src="./images/rest-1.jpg" alt="" />
              <h3>肯宁顿咖啡馆</h3>
              <ul class="star-lists">
                <li><i class="fa fa-star" aria-hidden="true"></i></li>
                <li><i class="fa fa-star" aria-hidden="true"></i></li>
                <li><i class="fa fa-star" aria-hidden="true"></i></li>
                <li><i class="fa fa-star" aria-hidden="true"></i></li>
              </ul>
              <div class="two-btn">
                <button>美式咖啡</button>
                <button>经典牛排</button>
              </div>
              <p>
                来自美国的纯正咖啡，满足咖啡爱好者的各种需求，还提供各种热食，特别推荐牛排！
              </p>
            </div>
            <div class="rest rest-2" data-reveal='right'>
              <img src="./images/rest-2.jpg" alt="" />
              <h3>维明顿西餐厅</h3>
              <ul class="star-lists">
                <li><i class="fa fa-star" aria-hidden="true"></i></li>
                <li><i class="fa fa-star" aria-hidden="true"></i></li>
                <li><i class="fa fa-star" aria-hidden="true"></i></li>
                <li><i class="fa fa-star" aria-hidden="true"></i></li>
                <li><i class="fa fa-star" aria-hidden="false"></i></li>
              </ul>
              <div class="two-btn">
                <button>意大利菜</button>
                <button>特色匹萨</button>
              </div>
              <p>如果你喜欢意大利美食，这家餐厅不可错过！</p>
            </div>
            <div class="rest rest-3" data-reveal>
              <img src="./images/rest-3.jpg" alt="" />
              <h3>国王之手</h3>
              <ul class="star-lists">
                <li><i class="fa fa-star" aria-hidden="true"></i></li>
                <li><i class="fa fa-star" aria-hidden="true"></i></li>
                <li><i class="fa fa-star" aria-hidden="true"></i></li>
                <li><i class="fa fa-star" aria-hidden="true"></i></li>
                <li><i class="fa fa-star" aria-hidden="true"></i></li>
              </ul>
              <div class="two-btn">
                <button>芝士汉堡</button>
                <button>香辣炸鸡</button>
              </div>
              <p>风靡全球的汉堡炸鸡店，最普通的食物是所有人的最爱！</p>
            </div>
          </div>
          <button>所有餐厅</button>
        </section>
        <!-- section4 -->
        <section class="section4">
          <div class="content w">
            <img
              src="./images/cta-banner.png"
              alt=""
              class="w-100"
              data-reveal='left'
            />
            <div class="text-area" data-reveal='top'>
              <h2>将喜欢的食物从餐厅带到你的餐桌</h2>
              <p>
                我们致力于打造最好的外送服务，你能享受到和餐厅中完全一样的美味食物！
              </p>
              <button class="btn">现在订购</button>
            </div>
          </div>
        </section>
        <!-- section5 -->
        <section class="section5">
          <div class="content w">
            <div class="title" data-reveal>服务创造美味</div>
            <div class="item-area" data-reveal='left'>
              <h3>976</h3>
              <span>满意的顾客</span>
            </div>
            <div class="item-area" data-reveal='top'>
              <h3>12</h3>
              <span>最好的餐厅</span>
            </div>
            <div class="item-area" data-reveal='right'>
              <h3>1k+</h3>
              <span>送达的食物</span>
            </div>
          </div>
        </section>
        <!-- section 6 -->
        <section class="section6">
          <div class="content w">
            <div class="text-area">
              <h2>客户对我们的评价</h2>
              <p>
                我一直以来都排斥通过外卖点购食物，因为我觉得这样的食物品质不好，但快吃网改变了我的看法，尝试过后我发现送给我的食物和在餐厅中点购几乎一模一样!
              </p>
              <div class="comments">
                <img src="./images/testi-avatar.jpg" alt="" />
                <div class="name">
                  <span>詹姆斯·哈登</span>
                  <div class="stars">
                    <i class="fa fa-star" aria-hidden="true"></i>
                    <i class="fa fa-star" aria-hidden="true"></i>
                    <i class="fa fa-star" aria-hidden="true"></i>
                    <i class="fa fa-star" aria-hidden="true"></i>
                    <i class="fa fa-star" aria-hidden="true"></i>
                  </div>
                </div>
              </div>
            </div>
            <div class="img">
              <img src="./images/testimonial-banner.png" alt="" class="w-100" />
            </div>
          </div>
        </section>
        <!-- section 7 -->
        <section class="section7">
          <div class="content w">
            <h1>想要加入我们吗？</h1>
            <div class="container">
              <div class="item relative">
                <div class="img">
                  <img src="./images/partner-1.jpg" alt="" class="w-100" />
                </div>
                <div class="info absolute">
                  <h3>外卖骑手</h3>
                  <button>了解更多</button>
                </div>
              </div>
              <div class="item relative">
                <div class="img">
                  <img src="./images/partner-2.jpg" alt="" class="w-100" />
                </div>
                <div class="info absolute">
                  <h3>供应商</h3>
                  <button>了解更多</button>
                </div>
              </div>
            </div>
          </div>
        </section>
        <!-- section 8 -->
        <section class="section8">
          <div class="content w">
            <div class="img">
              <img src="./images/newsletter-banenr.png" alt="" class="w-100" />
            </div>
            <div class="text-area">
              <div class="text">
                <h2>获取你喜欢<br />餐厅的每日菜单</h2>
                <input type="text" placeholder="输入邮箱地址" />
              </div>
              <button>点击订阅</button>
            </div>
          </div>
        </section>
      </article>
    </main>
    <!-- footer -->
    <footer>
     <div class="content w">
        <div class="footer1">
            <img src="./images/logo-footer.svg" alt="" />
            <h2>最好的餐厅<br/>带到你家</h2>
            <p>我们将和最好的餐厅紧密合作，将美妙的食物快速送到你的房间里</p>
          </div>
          <div class="footer2">
            <h4>网站地图</h4>
            <a href="#">首页</a>
            <a href="#">关于我们</a>
            <a href="#">合作餐厅</a>
            <a href="#">加入我们</a>
          </div>
          <div class="footer3">
            <h4>联系方式</h4>
            <p class="p1">
              <i class="fa fa-map-marker"></i>
              武汉市中地软件园
            </p>
            <p><i class="fa fa-envelope"></i>xzd@xzd.com</p>
            <p><i class="fa fa-phone"></i>88888888</p>
          </div>
     </div>
     <div class="copyright">
        Copyright 2022 codewithxzd. All rights reserved.
     </div>
    </footer>
    <!-- js外链 -->
    <script src="./js/index.js"></script>
  </body>
</html>
